<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 2.自定义两组样式，来控制transition内部的元素实现动画 -->
	<style>
		/* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
		/* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素动画已经结束 */
		.v-enter,
		.v-leave-to{
			opacity: 0;
			transform: translateX(150px);
		}

		/* v-enter-active 【入场动画的时间段】 */
		/* v-leave-active 【离场动画的时间段】 */
		.v-enter-active,
		.v-leave-active{
			transition: all 0.8s ease;
		}

		/* my-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
		/* my-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素动画已经结束 */
		.my-enter,
		.my-leave-to{
			opacity: 0;
			transform: translateY(150px);
		}

		/* my-enter-active 【入场动画的时间段】 */
		/* my-leave-active 【离场动画的时间段】 */
		.my-enter-active,
		.my-leave-active{
			transition: all 0.8s ease;
		}
	</style>
</head>
<body>
<div id="app">
	<input type="button" value="toggle" @click="flag=!flag">
	<!-- 需求：点击按钮，让h3显示，再点击，让h3隐藏 -->
	<!-- 1.使用transition元素，把需要被动画控制的元素，包裹起来 -->
	<!-- transition元素,是Vue官方提供的 -->
	<transition>
		<h3 v-if="flag">这是一个H3</h3>
	</transition>
<br/>
	<input type="button" value="toggle2" @click="flag2=!flag2">
	<!-- 需求：点击按钮，让h3显示，再点击，让h3隐藏 -->
	<!-- 1.使用transition元素，把需要被动画控制的元素，包裹起来 -->
	<!-- transition元素,是Vue官方提供的 -->
	<!-- name可以设置前缀 -->
	<transition name="my">
		<h6 v-if="flag2">这是一个H6</h6>
	</transition>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
	var app = new Vue({
		el:'#app',
		data:{
			flag:false,
			flag2:false
		}
	})
</script>
</body>
</html>